<template>
  <div class='container'>
    <div class='weui-cell'>
        <div class='weui-cell__bd'>
          <div class='tit'>生成海报 </div>
          <div class='tit2'>保存你的邀请卡，邀请好友和你一起学习</div>
        </div>
    </div>
    <div class='card'>
      <canvas style="width:353px; height: 498px;" canvas-id="secondCanvas" binderror="canvasIdErrorCallback"></canvas>
    </div>
    <div class='btn' @click='saveImage'>
        保存图片
    </div>
  </div>

</template>

<script>
import {rushinfo} from "@/api/rush"
import {pingInfo} from "@/api/ping"
import {code} from "@/api/operate"
export default {
  components: {

  },

  data () {
    return {
      info:{},
      rushid:"",
      user_id:0,
      type:"",
      qrcode:""
    }
  },
  methods:{
    getInfo(){
      let data={}
      data.id=this.rushid;
      data.user_id=this.user_id;
      if(this.type==5){
        pingInfo(data).then(res=>{
          if(res.code==200){
            this.info=res.data;
            
          }
        }).then(res=>{
            this.setIMG()
        })
      }else{
         rushinfo(data).then(res=>{
          if(res.code==200){
              this.info=res.data
          }else if(res.code==201){

          }
          
        }).then(res=>{
            this.setIMG()
        })
      }
      
    },
    selCom(data){
      this.Comment=[]
      this.selComId=data.id;
      this.getComment()
    },
    wordsWrap(ctx, name, nameWidth, maxWidth, startX, srartY, wordsHight) {
        let lineWidth = 0;
        let lastSubStrIndex = 0;
        for (let i = 0; i < name.length; i++) {
          lineWidth += ctx.measureText(name[i]).width;
          // console.log(lineWidth)
          if (lineWidth > maxWidth) {
            ctx.fillText(name.substring(lastSubStrIndex, i), startX, srartY);
            srartY += wordsHight;
            lineWidth = 0;
            lastSubStrIndex = i;
          }
          if (i == name.length - 1) {
            ctx.fillText(name.substring(lastSubStrIndex, i + 1), startX, srartY);
          }
        }
      },
    setIMG(){
      var context = wx.createCanvasContext('secondCanvas')
          wx.showLoading({
            title: "海报生成中.."
          });
          
          wx.getImageInfo({
            src: this.info.thumb,
            success: (res) => {
              
              context.drawImage('/static/images/bg_share@2x.png', 0, 0, 353, 498)
              context.font = 'normal 300 14px sans-serif';
              context.setFontSize(14)
              context.setFillStyle("#333333")
              this.wordsWrap(context, this.info.title, 265,296, 28, 300, 18);
              context.drawImage(res.path, 28, 125, 296, 147); //商品图
              wx.getImageInfo({
                src: this.qrcode,
                success: (res) => {
                  console.log(res)
                  context.drawImage(res.path, 240, 363, 80, 80);
                  wx.getStorage({
                    key: 'user_info',
                    success: (result) => {
                      var userinfo=result.data;
                       wx.getImageInfo({
                          src: userinfo.avatar,
                          success: (res) => {
                              context.setFontSize(14)
                              context.setFillStyle("#333")
                              context.font = 'bold 300 14px sans-serif';
                              context.fillText(userinfo.nickname, 90, 65)
                              var avatarurl_width = 55;    //绘制的头像宽度
                              var avatarurl_heigth = 55;   //绘制的头像高度
                              var avatarurl_x = 28;   //绘制的头像在画布上的位置
                              var avatarurl_y = 35;   //绘制的头像在画布上的位置
                              context.save();

                              context.beginPath(); //开始绘制
                              //先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
                              context.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
                              context.fillStyle = "#46B7FF"; 

                              context.clip();//画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因

                              context.drawImage(res.path, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片，必须是https图片

                              context.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下即状态 还可以继续绘制

                              
                              context.stroke()
                              context.draw()
                              wx.hideLoading();
                              
                              
                              
                              }
                          })  
                          }
                        })
                    },
                    fail: () => {},
                    complete: () => {}
                  });
                    
                  // let userinfo=wx.getStorageSync("user_info")
                  
                  
                     
                 }
              })
        },
    showIt() {
      let data={};
      data.user_id=this.user_id;
      data.share_type=this.type;
      data.course_id=this.rushid
      code(data).then(res=>{
        if(res.code==200){
           this.qrcode=res.data;
        }
          
      }).then(res=>{
          this.getInfo()
      })  
      
    },
    saveImage: function (e) {
      wx.canvasToTempFilePath({
        canvasId: 'secondCanvas',
        success: function (res) {
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success(result) {
              wx.showToast({
                title: '图片保存成功',
                icon: 'success',
                duration: 2000
              })
            }
          })
        }
      })
    },

  },
  mounted() {
    
  },
  onLoad(options){
     console.log(options)
     
     wx.getStorageSync("user_info")?this.user_id=wx.getStorageSync("user_info").id:'';
     Object.assign(this.$data, this.$options.data())
     this.rushid=options.id;
     this.type=options.type;
  },
  onShow(){
     this.showIt() 
       
  },
  onUnload(){
    
  },
  onReachBottom(){
    if(this.load1){
       this.currentPage++
       this.getComment()
    }
  },
}
</script>
<style  lang="scss">
canvas{
  box-shadow:0px 0px 10px 0px rgba(19,19,19,0.13);
  margin:0 auto;
}
.tit{
  font-size:36rpx;
  font-weight:bold;
  color:rgba(51,51,51,1);
  line-height: 1;
  padding-top: 30rpx;
}
.tit2{
  font-size:28rpx;
  font-weight:500;
  color:rgba(51,51,51,1);
  line-height: 1;
  margin-top: 10rpx;
  padding-bottom: 10rpx;
}
.card{
  margin: 0 auto;
}

.btn{
  width:345px;
  height:45px;
  background:#1A84FB;
  border-radius:6px;
  margin: 0 auto;
  margin-top: 35rpx;
  font-size:30rpx;
  font-weight:bold;
  color:rgba(255,255,255,1);
  line-height:44px;
  text-align: center;
}

  
</style>
